<template>
	<view class="recharge">
		<!-- #ifdef APP-PLUS -->
		<top-set backgroundColor="#f8f8f8"></top-set>
		<!-- #endif -->
		<view class="tab_top_box">
			<view class="index">
				<view class="nav_back" @tap="drawBack()">
					<image src="/static/login/back.png" mode=""></image>
				</view>
				钱包充值
			</view>
		</view>

		
		<view class="content">
			<view class="wallet_box">
				<view class="wallet_l">充值到钱包</view>
				<view class="wallet_r">我的钱包</view>
			</view>
			<view class="input_box">
				<input class="price_input" v-model="activeNum" type="number"  placeholder="手动输入充值金额" value="" />
			</view>
			<view class="wallet_box">
				<view class="wallet_l">快速充值</view>
				
			</view>
			<view class="wallet_cheack uni-clearfix">
				<view class="item" :class="[activeNum == 10?'active':'']" @tap="activeTap(10)">10元</view>
				<view class="item" :class="[activeNum == 20?'active':'']" @tap="activeTap(20)">20元</view>
				<view class="item" :class="[activeNum == 50?'active':'']" @tap="activeTap(50)">50元</view>
				<view class="item" :class="[activeNum == 100?'active':'']" @tap="activeTap(100)">100元</view>
				<view class="item" :class="[activeNum == 200?'active':'']" @tap="activeTap(200)">200元</view>
				<view class="item" :class="[activeNum == 500?'active':'']" @tap="activeTap(500)">500元</view>
			</view>
			<view class="wallet_box" style="margin-top: 20upx;">
				<view class="wallet_l">选择支付方式</view>
				
			</view>
			<view class="pay_method">
				<view class="wx_pay" @tap="changeMethod('wx')">
					<view class="pay_text1">
						<image src="/static/icon/wx-pay.png" mode=""></image>
					</view>
					<view class="pay_text2">
						<view class="pay_text2_up">
							<view class="ptu_left">微信支付</view>
							<view class="ptu_right"><image src="/static/icon/recommend.png" mode=""></image></view>
						</view>
						<view class="pay_text2_down">亿万用户的选择，更快更安全</view>
					</view>
					<view class="pay_text3" :class="payMethod == 'wx'?'text3_active':''">
						<image src="/static/icon/dui.png" mode=""></image>
					</view>
				</view>
				<view class="ali_pay" @tap="changeMethod('ali')">
					<view class="pay_text1">
						<image src="/static/icon/ali-pay.png" mode=""></image>
					</view>
					<view class="pay_text2">
						<view class="pay_text2_up">
							<view class="ptu_left">支付宝支付</view>
						</view>
						<view class="pay_text2_down">支持支付宝余额和银行卡充值</view>
					</view>
					<view class="pay_text3 " :class="payMethod == 'ali'?'text3_active':''">
						<image src="/static/icon/dui.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="btn" @tap = "rechargeBtn">
				充值
			</view>
			
		</view>
		
		
		
	</view>
</template>

<script>
	export default{
		
		data() {
			return {
				key: '',
				activeNum:NaN,
				payMethod:'wx',//微信  wx  __ 支付宝 ali
			}
		},
		methods: {
			activeTap(val){
				this.activeNum = val;
			},
			async rechargeBtn(){
				let method,res,orderInfo;

				
					
				if(this.activeNum == NaN || this.activeNum == '' ){
					uni.showToast({
						icon:'none',
					    title: "请输入金额"
					});
					return;
				}
				if(!this.regularVerification('jine',this.activeNum)){
					uni.showToast({
						icon:'none',
					    title: "请输入正确的金额"
					});
					return;
				}
				
				
				if(this.payMethod == 'wx'){
					method = 'wxpay';
					res = await this.getOrderInfo();
					orderInfo = JSON.stringify(res.data.return);
				}else{
					method = 'alipay';
					res = await this.getAliOrderInfo();
					orderInfo = res.data.return.alipay;
					console.log(res);
					
				}
					console.log(123);
					 uni.showLoading();
					 
					 console.log(res);
					 uni.requestPayment({
					    provider: method,
					    orderInfo:orderInfo,
					    success: (e) => {
					        console.log("success", e);
					        uni.showToast({
					            title: "支付成功!"
					        });
					    },
					    fail: (e) => {
					        console.log({"fail":e});
							 uni.hideLoading();
					        // uni.showModal({
					        //     content: JSON.stringify(e),
					        //     showCancel: false
					        // })
					    },
					    complete: () => {
					        uni.hideLoading();
					    }
					})

				 
			},
			getOrderInfo(){
				return new Promise((res) => {
					this.req({
						url:'api/wxPayment',
						data:{
							id:this.isLogin().id,
							amount:this.activeNum
						}
					},(data)=>{
						res(data.data);
					},(data)=>{
						uni.showToast({
							icon:'none',
							title:'服务器繁忙,请稍后重试'
						})
					});
				   
				})
			},
			getAliOrderInfo(){
				return new Promise((res) => {
					this.req({
						url:'api/AliPayment',
						data:{
							id:this.isLogin().id,
							amount:this.activeNum
						}
					},(data)=>{
						res(data.data);
					},(data)=>{
						uni.showToast({
							icon:'none',
							title:'服务器繁忙,请稍后重试'
						})
					});
				})
			},
			drawBack() {
				uni.navigateBack({
					delta: 1,
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				});
			},
			changeMethod(val){
				this.payMethod = val;
			}
		},
		mounted(){
			
		},
		computed:{
			
		}
	}
</script>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.tab_top_box {
		width: 100vw;
		height: 86upx;
		.i_fixed {
			position: fixed !important;
			z-index: 99;
			left: 0;
			top: var(--status-bar-height);
		}
	
		.index {
			position: relative;
			font-size: 36upx !important;
			background: #f8f8f8;
			width: 100%;
			height: 86upx;
			line-height: 86upx;
			text-align: center;
			
		}
		.tab_zd{
			position: absolute;
			top: 0;
			right: 0;
			font-size: 32upx;
			text-align: center;
			line-height: 86upx;
			height: 100%;
			width: 120upx;
			text-align: center;
		}
		.index:after {
			content: '';
			height: 1upx;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			transform: scaleY(0.5);
			background: #E5E5E5;
		}
	
		.nav_back {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 60upx;
		}
	
		.nav_back image {
			position: absolute;
			width: 32upx;
			height: 32upx;
			left: 27upx;
			top: 27upx;
		}
	}
	.content > .input_box{
		width: 100%;
		height: 100upx;
		background-color: #f8f8f8;
		.price_input{
			float: left;
			width: 90%;
			height: 100%;
			line-height: 100upx;
			margin-left: 24upx;
			font-size: 28upx;
			color: #999999;
		}
	}
	.content{
		width: 100%;
		// height: calc(100vh - var(--status-bar-height) - 86upx);
		background: #f8f8f8;
		
	}
	.content > .wallet_box{
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 24upx;
		font-size: 28upx;
		background: #FFFFFF;
		.wallet_l{
			height: 100%;
			line-height: 100upx;
			float: left;
			color: #333333;
		}
		.wallet_r{
			height: 100%;
			line-height: 100upx;
			float: right;
			color: #999999;
		}
	}
	.content > .pay_method{
		width: 100%;
		background: #FFFFFF;
		.wx_pay,.ali_pay{
			width: calc(100% - 48upx);
			height: 126upx;
			margin: 0 auto;
			position: relative;
			.pay_text1{
				float: left;
				margin-top: 30upx;
				width: 60upx;
				height: 60upx;
				image{
					float: left;
					width: 100%;
					height: 100%;
				}
			}
			.pay_text2{
				float: left;
				margin-left: 25upx;
				margin-top: 32upx;
				.pay_text2_up{
					height: 28upx;
					font-size: 28upx;
					.ptu_left{
						float: left;
						font-size: 28upx;
						line-height: 1;
						color: #333333;
					}
					.ptu_right{
						float: left;
						margin-top: 2upx;
						margin-left: 7upx;
						height: 23upx;
						width: 58upx;
						image{
							float: left;
							width: 100%;
							height: 100%;
						}
					}
				}
				.pay_text2_down{
					height: 24upx;
					font-size: 24upx;
					color: #999999;
				}
				
			}
			.pay_text3{
				float: right;
				margin-top: 42upx;
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				border:1upx solid #999999;
				image{
					display: none;
					width: 100%;
					height: 100%;
					
					
				}
			}
			.text3_active{
				border:none;
				image{
					display: inline;
				}
			}
		}
		.wx_pay{
			
		}
		.wx_pay:after{
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1upx;
			background-color:#e5e5e5;
			transform:scaleY(0.5);
		}
		.ali_pay{
			
		}
	}
	.content > .wallet_cheack{
		box-sizing: border-box;
		padding: 0 24upx;
		background: #FFFFFF;
		.item{
			float: left;
			width: 222upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			border-radius: 8upx;
			color: #999999;
			margin-right: calc( (100% - 666upx) / 2);
			margin-bottom: 20upx;
			font-size: 28upx;
			box-sizing: border-box;
			border: solid 1upx #999999;
		}
		.item:nth-of-type(3n){
			margin-right:0; 
		}
		.active{
			color: #3595f9;
			border: solid 1px #3595f9;
		}
	}
	.content > .btn{
		width: 540upx;
		height: 90upx;
		background-color: #3595f9;
		border-radius: 8upx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 134upx;
		margin-bottom: 84upx;
		line-height: 90upx;
		text-align: center;
	}
</style>
<style>
